import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';

class BaseCustomizeSegmentedControl extends StatefulWidget {
  final List<Widget> items; // 选择项组件
  final int selectedIndex; // 当前选中的索引
  final ValueChanged<int> onChanged; // 选择变化的回调

  const BaseCustomizeSegmentedControl({
    super.key,
    required this.items,
    required this.selectedIndex,
    required this.onChanged,
  });

  @override
  BaseCustomizeSegmentedControlState createState() => BaseCustomizeSegmentedControlState();
}

class BaseCustomizeSegmentedControlState extends State<BaseCustomizeSegmentedControl> {
  @override
  Widget build(BuildContext context) {
    return widget.items.length > 1
        ? Container(
            child: buildItemsStyle(),
          )
        : Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                stops: const [0.5, 0.5], // 上下两部分的分界点
                colors: [
                  Tools.fromHex('#ed6566'), // 上半部分的颜色
                  Colors.white, // 下半部分的颜色
                ],
              ),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                SizedBox(
                  width: 100,
                  child: buildItemsStyle(),
                ),
                Expanded(
                  child: Container(
                    margin: const EdgeInsets.only(top: 20),
                    decoration: BoxDecoration(
                      color: Tools.fromHex('#ed6566'),
                      borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(10)),
                    ),
                  ),
                ),
              ],
            ),
          );
  }

  Container buildItemsStyle() {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          stops: const [0.5, 0.5], // 上下两部分的分界点
          colors: [
            Tools.fromHex('#ed6566'), // 上半部分的颜色
            Colors.white, // 下半部分的颜色
          ],
        ),
      ),
      child: SingleChildScrollView(
        physics: const ClampingScrollPhysics(), // 取消弹性效果
        scrollDirection: Axis.horizontal,
        child: Row(
          children: List.generate(widget.items.length, (index) {
            final bool isSelected = widget.selectedIndex == index;

            return GestureDetector(
              onTap: () {
                widget.onChanged(index);
              },
              child: Container(
                width: 120,
                alignment: Alignment.bottomCenter,
                child: Container(
                  height: isSelected ? 80 : 60, // 选中项高度为80，未选中项为60
                  padding: EdgeInsets.zero,
                  decoration: BoxDecoration(
                    color: isSelected ? Colors.white : Tools.fromHex('#ed6566'), // 选中与未选中颜色
                    borderRadius: _getBorderRadius(index),
                  ),
                  child: Center(
                    child: widget.items[index],
                  ),
                ),
              ),
            );
          }),
        ),
      ),
    );
  }

  BorderRadius _getBorderRadius(int index) {
    if (widget.selectedIndex == index) {
      return const BorderRadius.only(
        topLeft: Radius.circular(10),
        topRight: Radius.circular(10),
        bottomLeft: Radius.zero,
        bottomRight: Radius.zero,
      );
    } else if (index > 0 && widget.selectedIndex == index - 1) {
      return const BorderRadius.only(
        bottomLeft: Radius.circular(10),
        bottomRight: Radius.zero,
      );
    } else if (index < widget.items.length - 1 && widget.selectedIndex == index + 1) {
      return const BorderRadius.only(
        bottomRight: Radius.circular(10),
        bottomLeft: Radius.zero,
      );
    } else {
      return BorderRadius.zero;
    }
  }
}
